<template>
	<div>
		<Bread>
			<template v-slot:title>
				<el-breadcrumb-item v-for="(item, index) in titleList" :key="index">
					{{ item }}</el-breadcrumb-item
				>
			</template></Bread
		>
		<el-card>
			<!-- 搜索框 -->
			<el-row class="bottom">
				<el-col :span="8">
					<el-input
						placeholder="请输入内容"
						v-model="queryInfo.query"
						class="input-with-select"
						v-on:input="search"
						:clearable="true"
					>
						<i icon="el-icon-search"></i>
						<el-button
							slot="append"
							icon="el-icon-search"
							class="pointer"
						></el-button>
					</el-input>
				</el-col>
				<!-- 添加商品按钮 -->
				<el-col :span="4"
					><el-button type="primary" @click="add">添加商品</el-button></el-col
				></el-row
			>
			<!-- 表格 -->
			<el-table :data="list.goods" border stripe class="bottom">
				<el-table-column type="index" width="50"> </el-table-column>
				<el-table-column prop="goods_name" label="名称"> </el-table-column>
				<el-table-column prop="goods_price" label="价格(元)" width="95">
				</el-table-column>
				<el-table-column prop="goods_number" label="数量" width="70">
				</el-table-column>
				<el-table-column prop="goods_weight" label="重量" width="70">
				</el-table-column>
				<el-table-column prop="add_time " label="创建时间" width="180">
					<template v-slot="scope">
						{{ scope.row.add_time | dataFormat }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="130">
					<template v-slot="scope">
						<div>
							<!--编辑按钮-->
							<el-button
								type="primary"
								icon="el-icon-edit"
								circle
								size=" small "
								@click="edit(scope.row)"
							></el-button>
							<!--删除按钮-->
							<el-button
								type="danger"
								icon="el-icon-delete"
								circle
								size=" small "
								@click="remove(scope.row)"
							></el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页功能 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[5, 10, 20, 50]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</el-card>
		<!-- 编辑商品对话框 -->
		<el-dialog
			title="编辑商品"
			:visible.sync="dialogVisible"
			width="30%"
			:show-close="false"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="商品名称" prop="goods_name">
					<el-input v-model="ruleForm.goods_name"></el-input>
				</el-form-item>
				<el-form-item label="商品价格" prop="goods_price">
					<el-input v-model="ruleForm.goods_price"></el-input>
				</el-form-item>
				<el-form-item label="商品数量" prop="goods_number">
					<el-input v-model="ruleForm.goods_number"></el-input>
				</el-form-item>
				<el-form-item label="商品重量" prop="goods_weight">
					<el-input v-model="ruleForm.goods_weight"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibles">取 消</el-button>
				<el-button type="primary" @click="dialogVisibled">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import Bread from '../../components/Bread.vue'
export default {
	name: 'Goods',
	components: {
		Bread,
	},
	data() {

		return {
			dialogVisible: false,
			titleList: ['商品管理', '商品列表'],
			queryInfo: {
				query: '',
				pagenum: 1,
				pagesize: 5,
			},
			id: '',
			ruleForm: {	
				goods_name: '',
				goods_price: '',
				goods_number: '',
				goods_weight: '',
			},
			rules: {
				goods_name: [{ required: true, message: '不能为空', trigger: 'blur' }],
				goods_price: [{ required: true, message: '不能为空', trigger: 'blur' }],
				goods_number: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				goods_weight: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
			},
			total: 0,
			list: [],
		}
	},
	methods: {
		// 对话框确定按钮
		dialogVisibled() {
			this.$refs.ruleForm.validate(boolean => {
				if(!boolean) return							
				this.$http.put(`/goods/${this.id}`,this.ruleForm)
				.then(res => {
					let {meta} = res.data

					if(meta.status != 201){
						this.$message.error(meta.msg )
						return
					}
					this.$message({
						message:'修改商品成功！',
						type:'success'
					})
					this.getGoodsData()
				}).catch(err => {
					console.log(err.message)
					
				})
			})
			
			this.dialogVisible = false
		},
		// 对话框取消按钮
		dialogVisibles() {
			
			this.dialogVisible = false
		},
		//编辑商品功能
		edit(row) {		
			this.id = row.goods_id
			this.ruleForm.goods_name = row.goods_name
			this.ruleForm.goods_price = row.goods_price
			this.ruleForm.goods_number = row.goods_number
			this.ruleForm.goods_weight = row.goods_weight
			this.dialogVisible = true			
		},
		//删除商品功能
		remove(row) {
	
			
			this.$confirm('是否删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
			})
				.then(() => {

					this.$http.delete(`goods/${row.goods_id}`).then(res => {
						let { meta } = res.data
						if (meta.status != 200) {
							this.$message.error('删除失败！')
						}
						this.$message({
							type: 'success',
							message: meta.msg,
						})
						this.getGoodsData()
					})
				})

				.catch(() => {})

		},
		//添加商品功能
		add() {
			this.$router.push({
				name: 'add',
			})
		},
		// 搜索框功能
		search() {
			this.getGoodsData()
		},
		//分页功能多少页功能
		handleSizeChange(v) {
			this.queryInfo.pagesize = v
			this.getGoodsData()
		},
		//分页功能 当前页
		handleCurrentChange(v) {
			this.queryInfo.pagenum = v
			this.getGoodsData()
		},
		// 获取商品管理数据
		getGoodsData() {
			this.$http
				.get('/goods', {
					params: this.queryInfo,
				})
				.then(res => {
					let { data, meta } = res.data
					if (meta.status != 200) {
						this.$message.error('获取参数失败!')
					}
					this.list = data		
					this.total = data.total
				})
				.catch(err => {
					console.log(err.$message)
				})
		},
	},
	created() {
		this.getGoodsData()
	},
}
</script>

<style scoped>
.el-card__body {
	overflow: hidden;
}
.el-table_1_column_2 {
	font-size: 12px;
}
.bottom {
	margin-bottom: 15px;
}
.el-table_9_column_41 {
	font-size: 12px;
}
.pointer {
	cursor: default;
}
</style>
